<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食订餐系统 - 管理员后台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .header {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 5px;
        }

        .header p {
            opacity: 0.9;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card h3 {
            color: #ff6b35;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #666;
            font-size: 14px;
        }

        .chart-container {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .chart-title {
            font-size: 20px;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }

        .chart {
            height: 300px;
            background: #f8f9fa;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 16px;
        }

        .actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }

        .action-btn {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            border: none;
            padding: 15px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .error {
            background: #fee;
            color: #c33;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
        }

        .success {
            background: #efe;
            color: #3c3;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
        }

        .table-container {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin-top: 20px;
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
        }

        tr:hover {
            background: #f8f9fa;
        }

        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
            
            .actions {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>美食订餐系统管理后台</h1>
        <p>数据统计与系统管理</p>
    </div>

    <div class="container">
        <!-- 系统概览 -->
        <div class="dashboard" id="dashboard">
            <div class="loading">正在加载数据...</div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-container">
            <div class="chart-title">店铺销量排行榜</div>
            <div class="chart" id="salesChart">
                图表加载中...
            </div>
        </div>

        <div class="chart-container">
            <div class="chart-title">订单趋势（最近7天）</div>
            <div class="chart" id="orderChart">
                图表加载中...
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
            <button class="action-btn" onclick="exportData('users')">导出用户数据</button>
            <button class="action-btn" onclick="exportData('stores')">导出店铺数据</button>
            <button class="action-btn" onclick="exportData('orders')">导出订单数据</button>
            <button class="action-btn" onclick="exportData('products')">导出商品数据</button>
            <button class="action-btn" onclick="refreshData()">刷新数据</button>
            <button class="action-btn" onclick="showImportDialog()">导入数据</button>
        </div>

        <!-- 店铺销量详情表 -->
        <div class="table-container">
            <h3>店铺销量详情</h3>
            <table id="storeTable">
                <thead>
                    <tr>
                        <th>店铺名称</th>
                        <th>月销量</th>
                        <th>评分</th>
                        <th>评价数</th>
                        <th>总收入</th>
                    </tr>
                </thead>
                <tbody id="storeTableBody">
                    <tr><td colspan="5" class="loading">加载中...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // API基础URL
        const API_BASE = 'http://localhost:8080';

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadDashboard();
            loadStoreSales();
        });

        // 加载仪表板数据
        async function loadDashboard() {
            try {
                const response = await fetch(`${API_BASE}/admin/statistics`);
                const result = await response.json();
                
                if (result.success) {
                    renderDashboard(result.data);
                } else {
                    showError('加载统计数据失败: ' + result.message);
                }
            } catch (error) {
                showError('网络错误: ' + error.message);
            }
        }

        // 渲染仪表板
        function renderDashboard(data) {
            const dashboard = document.getElementById('dashboard');
            dashboard.innerHTML = `
                <div class="card">
                    <h3>用户总数</h3>
                    <div class="stat-number">${data.totalUsers || 0}</div>
                    <div class="stat-label">注册用户</div>
                </div>
                <div class="card">
                    <h3>店铺总数</h3>
                    <div class="stat-number">${data.totalStores || 0}</div>
                    <div class="stat-label">入驻商家</div>
                </div>
                <div class="card">
                    <h3>订单总数</h3>
                    <div class="stat-number">${data.totalOrders || 0}</div>
                    <div class="stat-label">历史订单</div>
                </div>
                <div class="card">
                    <h3>商品总数</h3>
                    <div class="stat-number">${data.totalProducts || 0}</div>
                    <div class="stat-label">在售商品</div>
                </div>
                <div class="card">
                    <h3>今日订单</h3>
                    <div class="stat-number">${data.todayOrders || 0}</div>
                    <div class="stat-label">今日新增</div>
                </div>
                <div class="card">
                    <h3>今日用户</h3>
                    <div class="stat-number">${data.todayUsers || 0}</div>
                    <div class="stat-label">今日注册</div>
                </div>
            `;
        }

        // 加载店铺销量数据
        async function loadStoreSales() {
            try {
                const response = await fetch(`${API_BASE}/admin/store-sales`);
                const result = await response.json();
                
                if (result.success) {
                    renderStoreSales(result.data);
                    renderSalesChart(result.data.topStores);
                } else {
                    showError('加载店铺数据失败: ' + result.message);
                }
            } catch (error) {
                showError('网络错误: ' + error.message);
            }
        }

        // 渲染店铺销量表格
        function renderStoreSales(data) {
            const tbody = document.getElementById('storeTableBody');
            if (data.topStores && data.topStores.length > 0) {
                tbody.innerHTML = data.topStores.map(store => `
                    <tr>
                        <td>${store.name}</td>
                        <td>${store.monthlySales}</td>
                        <td>${store.rating}</td>
                        <td>${store.reviewCount}</td>
                        <td>¥${store.totalRevenue}</td>
                    </tr>
                `).join('');
            } else {
                tbody.innerHTML = '<tr><td colspan="5">暂无数据</td></tr>';
            }
        }

        // 渲染销量图表（简单的条形图）
        function renderSalesChart(stores) {
            const chart = document.getElementById('salesChart');
            if (stores && stores.length > 0) {
                const maxSales = Math.max(...stores.map(s => s.monthlySales));
                chart.innerHTML = `
                    <div style="width: 100%; height: 100%;">
                        ${stores.slice(0, 5).map(store => `
                            <div style="display: flex; align-items: center; margin-bottom: 15px;">
                                <div style="width: 120px; font-size: 14px;">${store.name}</div>
                                <div style="flex: 1; background: #eee; height: 20px; border-radius: 10px; margin: 0 10px; position: relative;">
                                    <div style="background: linear-gradient(90deg, #ff6b35, #f7931e); height: 100%; width: ${(store.monthlySales / maxSales * 100)}%; border-radius: 10px;"></div>
                                </div>
                                <div style="width: 60px; text-align: right; font-weight: bold;">${store.monthlySales}</div>
                            </div>
                        `).join('')}
                    </div>
                `;
            } else {
                chart.innerHTML = '暂无数据';
            }
        }

        // 导出数据
        async function exportData(type) {
            try {
                const response = await fetch(`${API_BASE}/admin/export/${type}`);
                const result = await response.json();
                
                if (result.success) {
                    // 创建下载链接
                    const blob = new Blob([result.data], { type: 'text/csv;charset=utf-8;' });
                    const link = document.createElement('a');
                    const url = URL.createObjectURL(blob);
                    link.setAttribute('href', url);
                    link.setAttribute('download', `${type}_export_${new Date().toISOString().split('T')[0]}.csv`);
                    link.style.visibility = 'hidden';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    
                    showSuccess(`${type} 数据导出成功`);
                } else {
                    showError('导出失败: ' + result.message);
                }
            } catch (error) {
                showError('导出错误: ' + error.message);
            }
        }

        // 刷新数据
        function refreshData() {
            loadDashboard();
            loadStoreSales();
            showSuccess('数据已刷新');
        }

        // 显示导入对话框
        function showImportDialog() {
            const type = prompt('请输入要导入的数据类型 (users/stores/orders/products):');
            if (type) {
                const data = prompt('请粘贴CSV数据:');
                if (data) {
                    importData(type, data);
                }
            }
        }

        // 导入数据
        async function importData(type, data) {
            try {
                const response = await fetch(`${API_BASE}/admin/import/${type}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                
                if (result.success) {
                    showSuccess(result.data);
                    refreshData();
                } else {
                    showError('导入失败: ' + result.message);
                }
            } catch (error) {
                showError('导入错误: ' + error.message);
            }
        }

        // 显示错误消息
        function showError(message) {
            const container = document.querySelector('.container');
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error';
            errorDiv.textContent = message;
            container.insertBefore(errorDiv, container.firstChild);
            
            setTimeout(() => {
                errorDiv.remove();
            }, 5000);
        }

        // 显示成功消息
        function showSuccess(message) {
            const container = document.querySelector('.container');
            const successDiv = document.createElement('div');
            successDiv.className = 'success';
            successDiv.textContent = message;
            container.insertBefore(successDiv, container.firstChild);
            
            setTimeout(() => {
                successDiv.remove();
            }, 3000);
        }
    </script>
</body>
</html> 